<template>
	<view>
		<view class="flex by1 a-c j-b p10" style="border: solid 2rpx #DCDCDC;">
			<view class="flex a-c" >
				<view class="ml2">
					<text class="bicon " v-if="bicon=='&#xe67b;'">&#xe67b;</text>
					<text class="bicon " v-if="bicon=='&#xe61c;'">&#xe61c;</text>

					<text class="bicon " v-if="bicon=='&#xe6c0;'">&#xe6c0;</text>
					<text class="bicon " v-if="bicon=='&#xe67a;'">&#xe67a;</text>
				</view>
				<view>
					<input v-if="type == 'nickname'" type="nickname" class="f30 ml2"
						style="height: 32px;flex:1 " v-model="val" :placeholder="placeholder" @blur="bindblur"
						@input="bindinput" />
					<input v-if="type == 'text'" class="f30 ml2" style="height: 32px;flex:1" v-model="val"
						type="text" :placeholder="placeholder" />
					<input v-if="type == 'password'" class="f30 ml2" style="height: 32px;flex:1" v-model="val"
						type="password" :placeholder="placeholder" />
				</view>
			</view>


			<view class="flex a-c">
				<view style="width: 120px;" v-if="codeimg" class="login__info__item__input__right-verify-code"
					@tap.stop="get_imgCode">
					<image style="width: 120px;height: 32px;" class="b_y" :src="codeimg">
					</image>
				</view>
				<view v-if="tips" style="flex-shrink:0;padding: 0 10rpx;" @tap.stop="getCode">
					<text class="f28">{{ tips }}</text>
				</view>
			</view>

		</view>

	</view>
</template>

<script type="text/javascript">
	export default {
		name: 'bm_input',
		props: {

			bicon: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'text'
			},
			placeholder: {
				type: String,
				default: ''
			},
			codeimg: {
				type: String,
				default: ''
			},
			tips: {
				type: String | Number,
				default: ''
			},
			name_val: {
				type: String | Number,
				default: ''
			},

		},
		mounted() {
			this.val = this.name_val
		},
		data() {
			return {
				val: '',
			}
		},
		watch: {
			val(val) {
				this.$emit('input', val);
			}
		},
		methods: {
			bindblur(e) {

				// #ifdef MP-WEIXIN

				this.$emit('input', e.detail.value);
				// #endif

			},
			bindinput(e) {
				// #ifdef MP-WEIXIN
				this.$emit('input', e.detail.value);
				// #endif


			},
			get_imgCode() {
				this.$emit('get_imgCode');
			},
			getCode() {
				this.$emit('getCode');
			},
		}
	}
</script>
<style scoped>
/* 	.f30{
		color: #fff;
	}
	.f28{
		color: #fff;
	} */
	input {
		-webkit-appearance: none;
		-moz-appearance: none;
		-o-appearance: none;
		appearance: none;
	}

	/* #ifndef APP-NVUE */
	.set-capital {
		text-align: center;
		line-height: 30px;
		height: 30px;
		padding: 0 5px;
		right: 0;
		/* width: 30px; */
		background: #1AAD19;
		color: #FFFFFF;
		position: absolute;
		bottom: 0px;
		font-size: 12px;
	}

	.close-view {
		text-align: center;
		line-height: 14px;
		height: 16px;
		width: 16px;
		border-radius: 50%;
		background: #FF5053;
		color: #FFFFFF;
		position: absolute;
		top: -6px;
		right: -4px;
		font-size: 12px;
	}

	.uni-uploader__input-box {
		position: relative;
		width: 208upx;
		height: 208upx;
		border: 2upx solid #D9D9D9;
	}

	.uni-uploader__input {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.uni-uploader-body {
		margin-top: 16upx;
	}

	.uni-uploader__files {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.uni-uploader__img {
		display: block;
		width: 210upx;
		height: 210upx;
	}

	/* #endif */
</style>